<template>
  <div class="container">
    <div class="list">
      <div v-for="item of fields" :key="item.Code" class="item">
        <div v-if="editFields.indexOf(item.Code)>=0 || readFields.indexOf(item.Code)>=0" class="item">
          <div v-if="item.FormType=='String'" class="event">
            <cell
              :title="item.Name"
              :icon="false"
              :val="item.LeaveType"
              :input="true"
              :must="item.Must"
            >
              <el-input
                v-if="editFields.indexOf(item.Code)>=0"
                v-model="item.Obj.Value"
                :placeholder="item.PlaceHolder"
                clearable
              />
              <span v-else class="gray">
                {{ item.Obj.Value }}
              </span>
            </cell>
          </div>
          <div v-else-if="item.FormType=='Number'" class="event">
            <cell
              :title="item.Name"
              :icon="false"
              :val="item.LeaveType"
              :placeholder="item.PlaceHolder"
              :input="true"
              :must="item.Must"
            >
              <el-input-number
                v-if="editFields.indexOf(item.Code)>=0"
                v-model="item.Obj.Value"
                :min="item.Obj.Min"
                :max="item.Obj.Max"
                :precision="item.Obj.Digit"
                :controls="false"
                :placeholder="item.PlaceHolder"
              />
              <span v-else class="gray">
                {{ item.Obj.Value }}
              </span>
            </cell>
          </div>
          <div v-else-if="item.FormType=='PublicEnum'" class="event" @click="clickKeyCode(item)">
            <cell
              :title="item.Name"
              :icon="editFields.indexOf(item.Code)>=0"
              :val="item.Obj.Value"
              :placeholder="item.PlaceHolder"
              :must="item.Must"
            >
              <span>{{ item.Obj.Value }}</span>
            </cell>
          </div>
          <div v-else-if="item.FormType=='CommonEnum'" class="event" @click="clickEnum(item)">
            <cell
              :title="item.Name"
              :icon="editFields.indexOf(item.Code)>=0"
              :val="item.Obj.Val"
              :placeholder="item.PlaceHolder"
              :must="item.Must"
            >
              <span>{{ item.Obj.Val }}</span></cell>
          </div>
          <div v-else-if="item.FormType=='Time'" class="event" @click="clickTime(item)">
            <cell
              :title="item.Name"
              :icon="editFields.indexOf(item.Code)>=0"
              :val="item.Obj.ValueStr"
              :placeholder="item.PlaceHolder"
              :must="item.Must"
            >
              <span>{{ item.Obj.Value | timeStr }}</span>
            </cell>
          </div>
          <div v-else-if="item.FormType=='Date'" class="event" @click="clickDate(item)">
            <cell
              :title="item.Name"
              :icon="editFields.indexOf(item.Code)>=0"
              :val="item.Obj.ValueStr"
              :placeholder="item.PlaceHolder"
              :must="item.Must"
            >
              <span>{{ item.Obj.Value | dateStr }}</span></cell>
          </div>
          <div v-else-if="item.FormType=='DateInterval'" class=" intervals">
            <div class="event" @click="clickStartTime(item)">
              <cell
                :title="item.Obj.StartName"
                :icon="editFields.indexOf(item.Code)>=0"
                :val="item.Obj.BeginDateStr"
                :placeholder="item.PlaceHolder+item.Obj.StartName"
                :must="item.Must"
              >
                <span>{{ item.Obj.BeginDate | timeStr }}</span></cell>
            </div>
            <div class="event" @click="clickEndTime(item)">
              <cell
                :title="item.Obj.EndName"
                :icon="editFields.indexOf(item.Code)>=0"
                :val="item.Obj.EndDateStr"
                :placeholder="item.PlaceHolder+item.Obj.EndName"
                :must="item.Must"
              >
                <span>{{ item.Obj.EndDate | timeStr }}</span></cell>
            </div>
          </div>
          <div v-else-if="item.FormType=='Files'" class="att">
            <attachment
              :template="item.Obj"
              :editable="editFields.indexOf(item.Code)>=0"
              :remark="false"
              :must="item.Must"
            />
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="showKeyCode" position="bottom ">
      <div v-if="showKeyCode" class="showKey">
        <tree
          ref="keycodeTree"
          :data="keys[selectedField.Obj.KeyCodeType].List"
          :checked-keys="checkedKeys"
          :props="keycodeProps"
          :multiple="selectedField.Obj.Multiple"
          :check-strictly="true"
        />
        <div class="opts">
          <nut-button
            @click="sureKeyCode"
          >
            确定
          </nut-button>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="showEnum" position="bottom ">
      <div v-if="showEnum" class="showKey">
        <tree
          ref="enumTree"
          :data="selectedField.Obj.lists"
          :checked-keys="selectedField.Obj.Value"
          :props="keycodeProps"
          :multiple="selectedField.Obj.Multiple"
          :check-strictly="false"
        />
        <div class="opts">
          <nut-button
            @click="sureEnum"
          >
            确定
          </nut-button>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="showTime" position="bottom ">
      <div v-if="showTime" class="showTime">
        <nut-datepicker
          :is-visible="showTime"
          title="请选择日期时间"
          type="datetime"
          start-date="2020-01-01 00:00:00"
          end-date="2030-10-05 10:04:00"
          :default-value="now"
          @close="showTime=false"
          @choose="sureTime"
        />
      </div>
    </van-popup>
    <van-popup v-model="showDate" position="bottom ">
      <div v-if="showDate" class="showDate">
        <nut-datepicker
          :is-visible="showDate"
          title="请选择日期"
          type="date"
          start-date="2020-01-01"
          end-date="2030-10-05"
          :default-value="nowDate"
          @close="showDate=false"
          @choose="sureDate"
        />
      </div>
    </van-popup>
    <van-popup v-model="showTimeBegin" position="bottom ">
      <div v-if="showTimeBegin" class="showTime">
        <nut-datepicker
          :is-visible="showTimeBegin"
          title="请选择日期时间"
          type="datetime"
          start-date="2020-01-01 00:00:00"
          end-date="2030-10-05 10:04:00"
          :default-value="now"
          @close="showTimeBegin=false"
          @choose="sureTimeBegin"
        />
      </div>
    </van-popup>
    <van-popup v-model="showTimeEnd" position="bottom ">
      <div v-if="showTimeEnd" class="showTime">
        <nut-datepicker
          :is-visible="showTimeEnd"
          title="请选择日期时间"
          type="datetime"
          start-date="2020-01-01 00:00:00"
          end-date="2030-10-05 10:04:00"
          :default-value="now"
          @close="showTimeEnd=false"
          @choose="sureTimeEnd"
        />
      </div>
    </van-popup>
  </div>
</template>
<script>
import cell from '@/components/form/formcell.vue'
import tree from '@/components/public/tree.vue'
import { getKeycodeTypes } from '@d_api/public/public'
import { parseTime } from '@/utils/index.js'
import attachment from '@/components/attachment/attachment.vue'
export default {
  name: 'HomeIcons',
  components: {
    cell, tree, attachment
  },
  filters: {
    timeStr(value) {
      if (!value) {
        return ''
      }
      return parseTime(value, '{y}-{m}-{d} {h}:{i}')
    },
    dateStr(value) {
      if (!value) {
        return ''
      }
      return parseTime(value, '{y}-{m}-{d}')
    }
  },
  props: {
    'fields': {
      type: Array,
      default: () => []
    },
    'editFields': {
      type: Array,
      default: () => []
    },
    'readFields': {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      keys: {},
      showKeyCode: false,
      keyCodeActiveId: '',
      checkedKeys: [],
      keycodeProps: {
        key: 'Key',
        name: 'Value',
        subs: 'List'
      },
      showEnum: false,
      showTime: false,
      now: '',
      nowDate: '',
      showDate: false,
      showTimeBegin: false,
      showTimeEnd: false
    }
  },
  computed: {
  },
  created() {
    var keys = []
    for (var item of this.fields) {
      switch (item.FormType) {
        case 'String':
          if (!item.Obj.Value) {
            item.Obj.Value = ''
          }
          break
        case 'Number':
          if (!item.Obj.Value && item.Obj.Value != 0) {
            item.Obj.Value = null
          }
          break
        case 'PublicEnum':
          if (item.Obj.Items && item.Obj.Items.length > 0) {
            this.buildKeycodeValue(item)
          } else {
            item.Obj.Key = ''
            item.Obj.Codes = []
            item.Obj.Value = ''
          }
          keys.push(item.Obj.KeyCodeType)
          break
        case 'CommonEnum':
          if (!item.Obj.Value) {
            item.Obj.Value = []
            item.Obj.Val = ''
          } else {
            item.Obj.Val = item.Obj.Value.join(';')
          }
          item.Obj.lists = []
          for (var it of item.Obj.List) {
            item.Obj.lists.push({
              Key: it,
              Value: it
            })
          }
          break
        case 'Time':
          if (!item.Obj.Value) {
            item.Obj.Value = null
          } else {
            item.Obj.ValueStr = item.Obj.Value
          }
          break
        case 'Date':
          if (!item.Obj.Value) {
            item.Obj.Value = null
          } else {
            item.Obj.ValueStr = item.Obj.Value
          }
          break
        case 'DateInterval':
          if (!item.Obj.BeginDate) {
            item.Obj.BeginDate = null
            item.Obj.BeginDateStr = ''
          } else {
            item.Obj.BeginDateStr = item.Obj.BeginDate
          }
          if (!item.Obj.EndDate) {
            item.Obj.EndDate = null
            item.Obj.EndDateStr = ''
          } else {
            item.Obj.EndDateStr = item.Obj.EndDate
          }
          break
        case 'Files':
          if (!item.Obj.Files) {
            item.Obj.Files = []
          }
          break
        default:
          break
      }
    }
    this.getKeycodeTypes(keys)
  },
  methods: {
    getKeycodeTypes(tps) {
      if (tps.length > 0) {
        getKeycodeTypes(tps).then(res => {
          for (var it in res.data) {
            var item = res.data[it]
            if (!item.List) {
              item.List = []
            }
            // this.initKeycodeList(item.List)
            this.initKeyCodesFields()
          }
          this.keys = res.data
        })
      }
    },
    initKeyCodesFields() {
      for (var item of this.fields) {
        switch (item.FormType) {
          case 'String':
            break
          case 'Number':
            break
          case 'PublicEnum':
            this.buildKeycodeValue(item)
            break
          case 'CommonEnum':
            break
          case 'Time':
            break
          case 'Date':
            break
          case 'DateInterval':
            break
          case 'Files':
            break
          default:
            break
        }
      }
    },
    getKeycodeCodes(key, list) {
      for (var item of list) {
        if (item.Key == key) {
          return [item.Value]
        } else if (item.List) {
          var subs = this.getKeycodeCodes(key, item.List)
          if (subs && subs.length > 0) {
            subs.unshift(item.Value)
            return subs
          }
        }
      }
      return null
    },
    initKeycodeList(list) {
      for (var item of list) {
        if (item.List && item.List.length == 0) {
          item.List = null
        } else if (item.List) {
          this.initKeycodeList(item.List)
        }
        item.children = item.List
        item.name = item.Value
        item.id = item.Key
      }
    },
    sureKeyCode() {
      var ref = this.$refs['keycodeTree']
      var checkedList = ref.getCheckedItems()
      this.checkedKeys.splice(0, this.checkedKeys.length)
      this.selectedField.Obj.Items.splice(0, this.selectedField.Obj.Items.length)
      for (var item of checkedList) {
        var codes = this.getKeycodeCodes(item.Key, this.keys[this.selectedField.Obj.KeyCodeType].List)
        var it = {
          Key: item.Key,
          Codes: codes
        }
        this.selectedField.Obj.Items.push(it)
        this.checkedKeys.push(it.Key)
      }
      this.buildKeycodeValue(this.selectedField)
      this.showKeyCode = false
    },
    sureEnum() {
      var ref = this.$refs['enumTree']
      var checkedList = ref.getCheckedItems()
      this.selectedField.Obj.Value.splice(0, this.selectedField.Obj.Value.length)
      for (var item of checkedList) {
        this.selectedField.Obj.Value.push(item.Key)
      }
      this.selectedField.Obj.Val = this.selectedField.Obj.Value.join(';')
      this.showEnum = false
    },
    buildKeycodeValue(item) {
      if (!item.Obj) {
        this.$set(item, 'Obj', { Items: [] })
      } else if (!item.Obj.Items) {
        this.$set(item.Obj, 'Items', [])
      }
      if (item.Obj.Value == null || item.Obj.Value != undefined) {
        this.$set(item.Obj, 'Value', '')
      }
      var list = []
      for (var it of item.Obj.Items) {
        list.push(it.Codes.join('/'))
      }
      item.Obj.Value = list.join(';')
    },
    clickKeyCode: function(item) {
      if (this.editFields.indexOf(item.Code) >= 0) {
        this.showKeyCode = true
        this.selectedField = item
        this.checkedKeys.splice(0, this.checkedKeys.length)
        for (var it of item.Obj.Items) {
          this.checkedKeys.push(it.Key)
        }
      }
    },
    clickEnum(item) {
      if (this.editFields.indexOf(item.Code) >= 0) {
        this.showEnum = true
        this.selectedField = item
      }
    },
    clickTime(item) {
      if (this.editFields.indexOf(item.Code) >= 0) {
        var obj = new Date()
        if (item.Obj.Value) {
          obj = item.Obj.Value
        }
        this.now = parseTime(obj, '{y}-{m}-{d} {h}:{i}')
        this.showTime = true
        this.selectedField = item
      }
    },
    sureTime(time) {
      console.log(time)
      var t = new Date(time[0], time[1] - 1, time[2], time[3], time[4], 0)
      this.selectedField.Obj.Value = t
      this.selectedField.Obj.ValueStr = time[5]
      this.showTime = false
    },
    clickDate(item) {
      if (this.editFields.indexOf(item.Code) >= 0) {
        var obj = new Date()
        if (item.Obj.Value) {
          obj = item.Obj.Value
        }
        this.showDate = true
        this.selectedField = item
        this.nowDate = parseTime(obj, '{y}-{m}-{d}')
      }
    },
    sureDate(time) {
      console.log(time)
      var t = new Date(time[0], time[1] - 1, time[2], 0, 0, 0)
      this.selectedField.Obj.Value = t
      this.selectedField.Obj.ValueStr = time[3]
      this.showDate = false
    },
    clickStartTime(item) {
      if (this.editFields.indexOf(item.Code) >= 0) {
        var obj = new Date()
        if (item.Obj.BeginDate) {
          obj = item.Obj.BeginDate
        }
        this.now = parseTime(obj, '{y}-{m}-{d} {h}:{i}')
        this.showTimeBegin = true
        this.selectedField = item
      }
    },
    sureTimeBegin(time) {
      console.log(time)
      var t = new Date(time[0], time[1] - 1, time[2], time[3], time[4], 0)
      this.selectedField.Obj.BeginDate = t
      this.selectedField.Obj.BeginDateStr = time[5]
      this.showTimeBegin = false
    },
    clickEndTime(item) {
      if (this.editFields.indexOf(item.Code) >= 0) {
        var obj = new Date()
        if (item.Obj.EndDate) {
          obj = item.Obj.EndDate
        }
        this.now = parseTime(obj, '{y}-{m}-{d} {h}:{i}')
        this.showTimeEnd = true
        this.selectedField = item
      }
    },
    sureTimeEnd(time) {
      console.log(time)
      var t = new Date(time[0], time[1] - 1, time[2], time[3], time[4], 0)
      this.selectedField.Obj.EndDate = t
      this.selectedField.Obj.EndDateStr = time[5]
      this.showTimeEnd = false
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  margin:@collection-space-y 0;
  background: @backgroundWhile;
  /deep/ .el-input-number{
    .el-input__inner{
    text-align: left;
    }
    width: 100%;
  }
}
.showKey{
  // padding:@collection-y @page-x;
  padding: @margin-yC @margin-xA;
  .opts{
    display: flex;
    margin-top:@collection-space-y;
    .nut-button{
      width: 100%;;
    }
  }
}
</style>
